<!-- 任务计划 -->
<template>
  <div class="whole">
    <el-container>
      <el-aside width="200px">
        <CommonAside />
      </el-aside>
      <el-container>
        <el-header>
          <ComponentsHeader />
        </el-header>
        <el-main>
          <div class="select">
            <el-button type="primary" round>选项卡1</el-button>
            <el-button round>选项卡2</el-button>
          </div>
          <div class="but">
            <el-button class="add" type="primary">新增</el-button>
            <el-button class="import" type="success">批量导入</el-button>
          </div>
          <!-- 表单 -->
          <div class="form">
            <div class="table">
              <h3>工位信息管理</h3>
              <el-table
                :header-cell-style="{ background: '#eef1f4', color: '#646a73' }"
                :data="tableData"
                style="width: 100%"
                height="250"
              >
                <el-table-column
                  fixed
                  prop="vehicle"
                  label="车辆编号"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="work" label="工单编号" width="200">
                </el-table-column>
                <el-table-column prop="customer" label="客户端编号" width="200">
                </el-table-column>
                <el-table-column prop="id" label="用户ID" width="150">
                </el-table-column>
                <el-table-column prop="station" label="工位编号" width="200">
                </el-table-column>
                <el-table-column prop="scan" label="扫码枪编号" width="200">
                </el-table-column>
                <el-table-column prop="rort" label="端口号" width="150">
                </el-table-column>
                <el-table-column
                  prop="electronic_wrench"
                  label="电子扳手编号"
                  width="200"
                >
                </el-table-column>
                <el-table-column prop="task" label="任务数" width="200">
                </el-table-column>
              </el-table>
            </div>
            <div class="table">
              <h3>当日任务管理</h3>
              <el-table
                :header-cell-style="{ background: '#eef1f4', color: '#646a73' }"
                :data="tableData"
                style="width: 100%"
                height="250"
              >
                <el-table-column
                  fixed
                  prop="vehicle"
                  label="车辆编号"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="work" label="工单编号" width="200">
                </el-table-column>
                <el-table-column prop="customer" label="客户端编号" width="200">
                </el-table-column>
                <el-table-column prop="id" label="用户ID" width="150">
                </el-table-column>
                <el-table-column prop="station" label="工位编号" width="200">
                </el-table-column>
                <el-table-column prop="scan" label="扫码枪编号" width="200">
                </el-table-column>
                <el-table-column prop="rort" label="端口号" width="150">
                </el-table-column>
                <el-table-column
                  prop="electronic_wrench"
                  label="电子扳手编号"
                  width="200"
                >
                </el-table-column>
                <el-table-column prop="task" label="任务数" width="200">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import ComponentsHeader from "@/components/ComponentsHeader";

export default {
  data() {
    return {
      tableData: [
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
        {
          vehicle: "12324",
          customer: "5456",
          id: 5463,
          work: "3534",
          station: "46547",
          scan: "43t54t45t",
          rort: "454",
          electronic_wrench: "454",
          task: "3454",
        },
      ],
    };
  },
  components: {
    CommonAside,
    ComponentsHeader,
  },
};
</script>

<style>
.whole {
  background-color: #edf7ff;
}
.el-header {
  padding: 0;
}
.but {
  float: right;
  margin-top: 10px;
}
.form {
  margin-top: 60px;
}
</style>
